<template>
  <section class="page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <section v-if="info">
            <div class="account-center-avatarHolder">
              <p class="left-header-con">
              <section class="enabled-con" v-if="$permissionJudge('SetVendorStatus')">
                <a-switch checked-children="开" un-checked-children="关" :checked="info.isEnabled"/>
                <span class="enabled-mack" @click="setEnabled()"></span>
              </section>
              <a v-if="$permissionJudge('VendorEdit')" href="javascript:"
                 @click="$refs.createOrEdit.createOrEditData(info)">编辑</a>
              </p>
              <div class="avatar">
                <img :src="info.logoUrl||'/avatar.png'">
              </div>
              <div class="username">{{ info.name }}</div>
              <a-tooltip :title="info.fullName">
                <div class="bio overflow" style="max-width: 100%;text-align: center;">{{ info.fullName }}</div>
              </a-tooltip>
            </div>
            <div class="account-center-detail">
              <p>
                <a-icon class="mr-5" type="user"/>
                {{ info.contactName }}
              </p>
              <p>
                <a-icon class="mr-5" type="phone"/>
                <spann style="vertical-align: middle;">{{ info.contactPhone }}</spann>
                <template v-if="info.contactEmail">
                  <a-divider style="top:0;" type="vertical"/>
                </template>
                <a-tooltip :title="info.contactEmail">
                  <span class="overflow"
                        style="display: inline-block;width: 50%;vertical-align: middle;">{{ info.contactEmail }}</span>
                </a-tooltip>
              </p>
            </div>
            <a-divider dashed/>
            <div class="account-center-info">
              <div class="infoTitle">账户情况</div>
              <a-row :gutter="[24,0]">
                <a-col :span="11" style="padding-left: 0">
                  <p class="mb-0 balance-title">余额(元)</p>
                  <p class="mb-0 balance-value">{{$utils.numberConversion(info.balanceAmount)}}</p>
                </a-col>
                <a-col :span="1" style="padding: 0">
                  <a-divider style="height:60px;" type="vertical"/>
                </a-col>
                <a-col :span="11" style="padding-right: 0">
                  <p class="mb-0 balance-title">其中冻结(元)</p>
                  <p class="mb-0 balance-value">
                    {{$utils.numberConversion(info.frozenBalanceAmount)}}</p>
                </a-col>
              </a-row>
              <a-row class="mt-24" :gutter="[24,0]">
                <a-col :span="11" style="padding-left: 0">
                  <p class="mb-0 balance-title">质量金(元)</p>
                  <p class="mb-0 balance-value">{{$utils.numberConversion(info.creditAmount)}}</p>
                </a-col>
                <a-col :span="1" style="padding: 0">
                  <a-divider style="height:60px;" type="vertical"/>
                </a-col>
                <a-col :span="11" style="padding-right: 0">
                  <p class="mb-0 balance-title">其中冻结(元)</p>
                  <p class="mb-0 balance-value">{{$utils.numberConversion(info.frozenCreditAmount)}}</p>
                </a-col>
              </a-row>
              <a-divider orientation="left" style="margin: 20px 0 0;">
                合计
              </a-divider>
              <a-row class="mt-24" :gutter="[24,0]">
                <a-col :span="11" style="padding-left: 0">
                  <p class="mb-0 balance-title">全部余额(元)</p>
                  <p class="mb-0 balance-value">{{$utils.numberConversion(info.amount)}}</p>
                </a-col>
                <a-col :span="1" style="padding: 0">
                  <a-divider style="height:60px;" type="vertical"/>
                </a-col>
                <a-col :span="11" style="padding-right: 0">
                  <p class="mb-0 balance-title">冻结(元)</p>
                  <p class="mb-0 balance-value">{{$utils.numberConversion(info.frozenAmount)}}</p>
                </a-col>
              </a-row>
            </div>
          </section>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card
          style="width:100%"
          :bordered="false"
          :tabList="$permissionJudge('StoreManage')?tabListNoTitle:tabListNoTitle1"
          :activeTabKey="noTitleKey"
          @tabChange="key => handleTabChange(key, 'noTitleKey')"
        >
          <WaterLists v-if="noTitleKey==='waterList'" :id="id" @upload="hannelDetails()"></WaterLists>
          <StoreSituation
            v-if="noTitleKey==='shopCondition'&&$permissionJudge('StoreManage')"
            :id="id"
            :logoUrl="info.logoUrl||'/avatar.png'"
            :name="info.name"
          />
          <CarManage v-if="noTitleKey === 'carManage'" :id="id"/>
          <Commission v-if="noTitleKey==='commission'" :id="id"></Commission>
          <AdminList v-if="noTitleKey==='admin'" :id="id"></AdminList>
        </a-card>
      </a-col>
    </a-row>
    <CreateOrEdit ref="createOrEdit" :id="id" @upload="hannelDetails"></CreateOrEdit>
    <section class="detail-footer">
      <a-button type="primary" @click="$router.back()">返回</a-button>
    </section>
  </section>
</template>
<script>
import { tableMixins } from '@/utils/mixins'
import { getVendorDetails, setVendorStatus, setShieldVendor } from '@/api/vendor'
import { cloneDeep } from 'lodash'
import WaterLists from './page/WaterList'
import StoreSituation from './page/StoreSituation'
import CreateOrEdit from './CreateOrEdit'
import Commission from './page/Commission'
import AdminList from './page/AdminList'
import CarManage from '@/views/operationInfo/supplierManagement/car/CarManage'
export default {
  name: 'SupplierManagementDetails',
  mixins: [tableMixins],
  components: { WaterLists, CreateOrEdit, StoreSituation, Commission, AdminList, CarManage },
  data() {
    return {
      tabListNoTitle: [
        {
          key: 'waterList',
          tab: '流水列表',
        },
        {
          key: 'shopCondition',
          tab: '门店情况',
        },
        {
          key: 'carManage',
          tab: '服务车辆',
        },
        {
          key: 'commission',
          tab: '佣金抽成',
        },
        {
          key: 'admin',
          tab: '管理员',
        },
      ],
      tabListNoTitle1: [
        {
          key: 'waterList',
          tab: '流水列表',
        },
        {
          key: 'carManage',
          tab: '服务车辆',
        },
        {
          key: 'commission',
          tab: '佣金抽成',
        },
        {
          key: 'admin',
          tab: '管理员',
        },
      ],
      noTitleKey: 'waterList',
      id: undefined,
      info: undefined,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
    }
  },
  async created() {
    if (!this.$permissionJudge('VendorSetCommission'))
      this.tabListNoTitle = this.tabListNoTitle.filter((item) => item.tab !== '佣金抽成')
    this.id = this.$route.params.id
    await this.hannelDetails()
  },
  methods: {
    cloneDeep,
    numberConversion(value) {
      value = value ? value : 0
      const newValue = ['', '', '']
      let fr = 1000
      let num = 3
      let txt = ''
      let fm = 1
      while (value / fr >= 1) {
        fr *= 10
        num += 1
      }
      if (num <= 5) {
        // 千
        newValue[0] = value + ''
        newValue[1] = ''
      } else if (num <= 8) {
        // 万
        txt = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
        fm = txt === '万' ? 10000 : 10000000
        if (value % fm === 0) {
          newValue[0] = parseInt(value / fm) + ''
        } else {
          newValue[0] = parseFloat(value / fm).toFixed(2) + ''
        }
        newValue[1] = txt
      } else if (num <= 16) {
        // 亿
        txt = (num - 8) / 3 > 1 ? '千亿' : '亿'
        txt = (num - 8) / 4 > 1 ? '万亿' : txt
        txt = (num - 8) / 7 > 1 ? '千万亿' : txt

        fm = 1
        if (txt === '亿') {
          fm = 100000000
        } else if (txt === '千亿') {
          fm = 100000000000
        } else if (txt === '万亿') {
          fm = 1000000000000
        } else if (txt === '千万亿') {
          fm = 1000000000000000
        }
        if (value % fm === 0) {
          newValue[0] = parseInt(value / fm) + ''
        } else {
          newValue[0] = parseFloat(value / fm).toFixed(2) + ''
        }
        newValue[1] = txt
      }
      if (value < 1000) {
        newValue[0] = value + ''
        newValue[1] = ''
      }
      return newValue.join('')
    },
    //设置服务商显示
    setShowVendors() {
      let { shieldVendorIds } = this.info
      this.allVendors = shieldVendorIds
        ? this.allVendors.map((item) => ({
            ...item,
            isShielding: !(shieldVendorIds.findIndex((l) => l === item.id) < 0),
          }))
        : this.allVendors
    },
    shielding() {
      this.showModal = true
      this.$nextTick(() => {
        const { allVendors } = this
        let { shieldVendorIds } = this.info
        if (shieldVendorIds) {
          shieldVendorIds = shieldVendorIds.filter((item) => allVendors.findIndex((l) => l.id === item) >= 0)
          this.info.shieldVendorIds = shieldVendorIds
          this.form.setFieldsValue({ shieldVendorIds })
        }
      })
    },
    setEnabled() {
      const { id, name, isEnabled } = this.info
      this.$confirm({
        title: `请确认是否${isEnabled ? '停用' : '启用'}服务商`,
        content: isEnabled ? `请确定要停用【${name}】服务商吗？` : `请确定要启用【${name}】服务商吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          setVendorStatus({ id, isEnabled: !isEnabled }).then((res) => {
            this.$message.success('设置成功！')
            this.hannelDetails()
          })
        },
      })
    },
    async hannelDetails(type) {
      await getVendorDetails({ id: this.id }).then((res) => {
        this.info = res
      })
    },
    handleTabChange(key, type) {
      this[type] = key
    },
  },
}
</script>
<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  margin-bottom: 60px;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    .left-header-con {
      display: flex;
      justify-content: space-between;
    }

    & > .avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }
}

.account-center-info {
  .balance-title {
    color: #999;
    text-align: center;
  }

  .balance-value {
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
  }
}

.infoTitle {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 24px;
}

.enabled-con {
  position: relative;

  .enabled-mack {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}

/deep/ .ant-divider-horizontal.ant-divider-with-text-left::before,
/deep/ .ant-divider-horizontal.ant-divider-with-text-left::after {
  top: 6%;
}

.detail-footer {
  padding: 10px 16px;
  position: fixed;
  width: 100%;
  height: 52px;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
